import React ,{Component} from 'react';
import axios from 'axios';
import {withRouter} from 'react-router-dom';
import Clist from './cList.js';
import './citys.css';
import Scroll from 'react-bscroll';
import 'react-bscroll/lib/react-scroll.css';


 

 class Citys extends Component {

    constructor(props){
        super(props);
        this.state={
            cityList:{},
            hotCities:[],
            touchStatus:false,
            startY:0
        }
    }
    _getCityList=()=>{
        axios.get('https://www.easy-mock.com/mock/5b42fe459fb42c572b20c6cb/travle/city')
        .then( (response) => {
             this.setState({
                cityList:response.data.data.cities,
                hotCities:response.data.data.hotCities
                
             },function(){
                 console.log(this.state)
             })
        })
        .catch( (error) => {
          console.log(error);
        });
    };
    componentDidMount=function(){
        this._getCityList();
        this.scrollObj = this.refs.scroll.getScrollObj();
    };
    seleCity = (item) => {
        if(item){
            this.props.onChange(item);
        };
        
    };
    seleZ = (e) => {
      let el = e.target.innerText;
      let aDiv = this.getElementByAttr('div','data-ref',el);
        this.scrollObj.scrollToElement(aDiv[0],300);
    };
    touchstart = (e) => {
        let el = e.target.innerText;
      let aDiv = this.getElementByAttr('div','data-ref',el);
        this.scrollObj.scrollToElement(aDiv[0],300);
        // let ADiv = this.getElementByAttr('div','data-ref','A');
        // this.setState({
        //     touchStatus:true,
        //     startY:ADiv[0].offsetTop
        // });
    }
    touchmove = (e) => {
        if(this.state.touchStatus){
           console.log(e.touches[0].clientY)
        }
    }
    touchend = (e) => {
        this.setState({
            touchStatus:false
        });
    };
    getElementByAttr = function(tag,attr,value){
        var aElements=document.getElementsByTagName(tag);
            var aEle=[];
            for(var i=0;i<aElements.length;i++)
            {
                if(aElements[i].getAttribute(attr) == value)
                    aEle.push( aElements[i] );
            }
            return aEle;
    }
    render (){
        let {cityList} = this.state;
        return (
            <div className="Citys">
               <Scroll ref='scroll' click='true'>
                    <div className="c_item">
                    <div className="c_title">当前城市</div>
                    <div className="c_citys">
                        <div className="c_city">成都</div>
                    </div>
                    </div>
                    <div className="c_item">
                    <div className="c_title">热门城市</div>
                    <div className="c_citys">
                    {
                        this.state.hotCities.map((item,i)=>{
                            return <div key={item.id} className="c_city" onClick={this.seleCity.bind(this,item.name)}>{item.name}</div>
                        })
                    }
                    </div>
                    </div>
                    <Clist cityList={cityList} onChangeCity={this.seleCity.bind(this)}/>
                </Scroll>
                <div className="basic">
                  <ul>
                      {
                          Object.keys(cityList).map((key) => {
                              return <li 
                              onClick={this.seleZ.bind(this)} 
                              onTouchStart={this.touchstart.bind(this)}
                              onTouchMove={this.touchmove.bind(this)}
                              onTouchEnd={this.touchend.bind(this)}
                              key={key}>{key}</li>
                          })
                      }
                      
                  </ul>
                </div>
            </div>
        )
    }
}
export default withRouter(Citys)
